<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RAG智能问答系统</title>
    <link rel="stylesheet" href="/static/css/style.css">
    <!-- 引入Font Awesome图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- 引入Marked.js用于Markdown渲染 -->
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
</head>
<body>
    <!-- 页面头部 -->
    <header class="header">
        <div class="container">
            <div class="header-content">
                <div class="logo">
                    <i class="fas fa-brain"></i>
                    <h1>RAG智能问答系统</h1>
                </div>
                <div class="system-info">
                    <div class="status-indicator">
                        <span class="status-dot" id="statusDot"></span>
                        <span id="systemStatus">初始化中...</span>
                    </div>
                    <button class="btn-refresh" id="refreshBtn" title="刷新状态">
                        <i class="fas fa-sync-alt"></i>
                    </button>
                </div>
            </div>
        </div>
    </header>

    <!-- 主要内容区域 -->
    <main class="main-content">
        <div class="container">
            <!-- 系统信息卡片 -->
            <div class="info-card" id="infoCard">
                <div class="info-grid">
                    <div class="info-item">
                        <i class="fas fa-server"></i>
                        <div>
                            <div class="info-label">模型</div>
                            <div class="info-value" id="modelName">-</div>
                        </div>
                    </div>
                    <div class="info-item">
                        <i class="fas fa-database"></i>
                        <div>
                            <div class="info-label">文档数量</div>
                            <div class="info-value" id="docCount">-</div>
                        </div>
                    </div>
                    <div class="info-item">
                        <i class="fas fa-folder"></i>
                        <div>
                            <div class="info-label">数据库路径</div>
                            <div class="info-value" id="dbPath">-</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 选项卡导航 -->
            <div class="tabs">
                <button class="tab-btn active" data-tab="single">
                    <i class="fas fa-comment"></i>
                    单问题问答
                </button>
                <button class="tab-btn" data-tab="custom">
                    <i class="fas fa-sliders-h"></i>
                    自定义参数问答
                </button>
            </div>

            <!-- 选项卡内容 -->
            <div class="tab-content">
                <!-- 单问题问答 -->
                <div class="tab-pane active" id="single">
                    <div class="qa-card">
                        <div class="input-section">
                            <label class="input-label">
                                <i class="fas fa-question-circle"></i>
                                请输入您的问题
                            </label>
                            <textarea 
                                class="question-input" 
                                id="singleQuestion" 
                                placeholder="例如：什么是RAG系统？它有什么优势？"
                                rows="4"
                            ></textarea>
                            <button class="btn-primary" id="askBtn">
                                <i class="fas fa-paper-plane"></i>
                                提交问题
                            </button>
                        </div>
                        
                        <div class="result-section" id="singleResult" style="display: none;">
                            <div class="result-header">
                                <h3><i class="fas fa-lightbulb"></i> 回答结果</h3>
                                <button class="btn-clear" id="clearSingleBtn">
                                    <i class="fas fa-times"></i>
                                    清除
                                </button>
                            </div>
                            
                            <div class="stats-bar">
                                <div class="stat-item">
                                    <i class="fas fa-file-alt"></i>
                                    检索到 <strong id="singleDocCount">0</strong> 个相关文档
                                </div>
                            </div>
                            
                            <div class="sources-section" id="singleSources"></div>
                            
                            <div class="answer-section">
                                <div class="answer-label">
                                    <i class="fas fa-robot"></i>
                                    AI回答
                                </div>
                                <div class="answer-content" id="singleAnswer"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 自定义参数问答 -->
                <div class="tab-pane" id="custom">
                    <div class="qa-card">
                        <div class="params-section">
                            <h3><i class="fas fa-cog"></i> 检索参数设置</h3>
                            <div class="param-grid">
                                <div class="param-item">
                                    <label for="maxDocs">
                                        <i class="fas fa-file-alt"></i>
                                        最大检索文档数
                                    </label>
                                    <input 
                                        type="number" 
                                        id="maxDocs" 
                                        value="5" 
                                        min="1" 
                                        max="20"
                                        class="param-input"
                                    >
                                    <small>建议：3-8个文档</small>
                                </div>
                                <div class="param-item">
                                    <label for="scoreThreshold">
                                        <i class="fas fa-sliders-h"></i>
                                        距离阈值（越小越严格）
                                    </label>
                                    <input 
                                        type="number" 
                                        id="scoreThreshold" 
                                        value="1.0" 
                                        min="0" 
                                        max="2.0" 
                                        step="0.1"
                                        class="param-input"
                                    >
                                    <small>范围：0.0-2.0，推荐0.5-1.5，值越小越严格</small>
                                </div>
                            </div>
                        </div>
                        
                        <div class="input-section">
                            <label class="input-label">
                                <i class="fas fa-question-circle"></i>
                                请输入您的问题
                            </label>
                            <textarea 
                                class="question-input" 
                                id="customQuestion" 
                                placeholder="例如：AI技术的发展趋势如何？"
                                rows="4"
                            ></textarea>
                            <button class="btn-primary" id="customAskBtn">
                                <i class="fas fa-paper-plane"></i>
                                使用自定义参数提交
                            </button>
                        </div>
                        
                        <div class="result-section" id="customResult" style="display: none;">
                            <div class="result-header">
                                <h3><i class="fas fa-lightbulb"></i> 回答结果</h3>
                                <button class="btn-clear" id="clearCustomBtn">
                                    <i class="fas fa-times"></i>
                                    清除
                                </button>
                            </div>
                            
                            <div class="stats-bar">
                                <div class="stat-item">
                                    <i class="fas fa-file-alt"></i>
                                    检索到 <strong id="customDocCount">0</strong> 个相关文档
                                </div>
                                <div class="stat-item">
                                    <i class="fas fa-cog"></i>
                                    参数：max_docs=<strong id="customMaxDocs">5</strong>, 
                                    threshold=<strong id="customThreshold">1.0</strong>
                                </div>
                            </div>
                            
                            <div class="sources-section" id="customSources"></div>
                            
                            <div class="answer-section">
                                <div class="answer-label">
                                    <i class="fas fa-robot"></i>
                                    AI回答
                                </div>
                                <div class="answer-content" id="customAnswer"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 加载指示器 -->
    <div class="loading-overlay" id="loadingOverlay">
        <div class="loading-spinner">
            <i class="fas fa-spinner fa-spin"></i>
            <p>正在处理中...</p>
        </div>
    </div>

    <!-- Toast通知 -->
    <div class="toast" id="toast"></div>

    <!-- 页面底部 -->
    <footer class="footer">
        <div class="container">
            <p>
                <i class="fas fa-copyright"></i> 2025 RAG智能问答系统 | 
                基于 <strong>BGE-M3</strong> 嵌入模型 + <strong>DeepSeek-V3</strong> 大模型
            </p>
        </div>
    </footer>

    <script src="/static/js/main.js"></script>
</body>
</html>



